<template>
	<view class="productList-app">
		<view class="mian">
			<!-- <shopProduct v-for='(item,index) in list' :item='item' :key='index'></shopProduct> -->
			
			<view class="shopProductItem"  v-for='(item,index) in list' :item='item' :key='index' >
				<view class="shop-img" @tap.stop="navTo(item.goods_id)">
					<image :src="item.cover_pic"
					 mode=""></image>
				</view>
				<view class="shop-title">
					{{item.name}}
				</view>
				<view @tap.stop="remove(item.goods_id)" style="text-align: center;width: 100%;color:#fff;background-color: #fcc80e;padding: 16rpx 0;">删除</view>
			</view>
			
		</view>
		<!--加载loadding-->
		<main-loadmore :visible="loadding" :index="3" type="red"></main-loadmore>
		<main-nomore :visible="!pullUpOn" bgcolor="#FFFFFF"></main-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				form:{
					mch_id:'',
					cat_id:'',
					keyword:'',
					label:'',
					page:1,
					limit:'',
				},
				page_count:'',
				pullUpOn:true,
				loadding:false,
			};
		},
		onShow() {
			this.initData()
			this.getGoodsList()
		},
		methods:{
			getGoodsList(){ //获取商户商品
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组			
				let curRoute = routes[routes.length - 1].route //获取当前页面路由				
				let curParam = routes[routes.length - 1].options; //获取路由参数
				this.form.mch_id=curParam.mch_id
				this.$http.request({
					url: this.$api.moreShop.getmchBaopinIndex,
					method: 'GET',
					data:this.form
				}).then(res => {
					if(res.code==0){
						if(res.data.list.length==0){
							this.pullUpOn=false
							return false
						}
						let list= res.data.list;
						var arr=this.list.concat(list)
						this.list =arr
						this.page_count = res.data.pagination.page_count;
						this.pullUpOn=true
					}else{
						this.$http.toast(res.msg);
					}
				});
			},
			
			initData(){
				this.list = [];
				this.form = {
					mch_id:'',
					cat_id:'',
					keyword:'',
					label:'',
					page:1,
					limit:'',
				}
			},
		
			navTo(id){
				uni.navigateTo({
					url: `/pages/goods/detail?proId=${id}`
				})
			},
			remove(id){
				let that = this;
				uni.showModal({
					title:"提示",
					content:"您确定要删除吗？",
					async success(res){
						if(res.confirm){
							let res = await that.$http.request({
								url:that.$api.moreShop.mchBaopinRemove,
								method:"post",
								data:{goods_id:id},
								showLoading:true
							});
							if(res.code !== 0){
								return that.$http.toast(res.msg);
							}
							that.initData();
							that.getGoodsList();
						}
					}
				})
				
			}
		},
		onReachBottom() {
			this.pullUpOn=true
			this.loadding=true
			if(this.form.page==this.page_count){
				this.pullUpOn=false
				this.loadding=false
				return false;
			} 		
			this.form.page=this.form.page+1
			this.getGoodsList();
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: './add?mch_id=' + this.form.mch_id
			})
		},
	}
</script>

<style lang="less" scoped>
	.productList-app{width: 100%;overflow: hidden;
	padding: 0 30rpx;box-sizing: border-box;}
	.mian{width: 100%;overflow: hidden;display: flex;justify-content: space-between;flex-wrap: wrap;}
	.none{width: 100%;}
	.shopProductItem {
		width: 325rpx;
		overflow: hidden;
		box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.5);
		margin: 10rpx 0;
		border-radius: 10rpx;
		padding: 5rpx;
	}
	
	.shopProductItem  .shop-img {
		width: 325rpx;
		overflow: hidden;
	}
	
	.shop-img image {
		width: 100%;
		display: block;
		height: 325rpx;
	}
	
	.shop-title {
		width: 100%;
		font-size: 20rpx;
		line-height: 30rpx;
		color: #000;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/*规定最多显示两行*/
		margin: 10rpx 0;
		height: 60rpx;
	}
	
	.shop-money {
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		margin: 10rpx 0;
	}
	.shop-money view:nth-of-type(1){
		font-size: 30rpx;
		color: #07beb4;
	}
	.shop-money view:nth-of-type(2){
		font-size: 25rpx;
		margin-top: 5rpx;
	}
</style>
